<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>update Emp</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css"
          href="css/style.css"/>
</head>

<body>
<div id="wrap">
    <div id="top_content">
        <div id="header">
            <div id="rightheader">
                <p>
                    {{time}}
                    <br/>
                    <a href="javascript:;" @click="logout">安全退出</a>
                </p>
            </div>
            <div id="topheader">
                <h1 id="title">
                    <a href="/emplist.html">员工更新页面</a>
                </h1>
            </div>
            <div id="navigation">
            </div>
        </div>
        <div id="content">
            <p id="whereami">
            </p>
            <h1>
                更新员工信息:
            </h1>
            <form action="emplist.html" method="post">
                <table cellpadding="0" cellspacing="0" border="0"
                       class="form_table">
                    <tr>
                        <td valign="middle" align="right">
                            id:
                        </td>
                        <td valign="middle" align="left">
                            {{emp.id}}
                        </td>
                    </tr>
                    <tr>
                        <td valign="middle" align="right">
                            姓名:
                        </td>
                        <td valign="middle" align="left">
                            <input type="text" class="inputgri" v-model="emp.name"/>
                        </td>
                    </tr>
                    <tr>
                        <td valign="middle" align="right">
                            工资:
                        </td>
                        <td valign="middle" align="left">
                            <input type="text" class="inputgri" v-model="emp.salary"/>
                        </td>
                    </tr>
                    <tr>
                        <td valign="middle" align="right">
                            年龄:
                        </td>
                        <td valign="middle" align="left">
                            <input type="text" class="inputgri" v-model="emp.age"/>
                        </td>
                    </tr>
                    <tr>
                        <td valign="middle" align="right">
                            原照片:
                        </td>
                        <td valign="middle" align="left">
                            <img :src="'/'+emp.path" width="150">
                        </td>
                    </tr>

                    <tr>
                        <td valign="middle" align="right">
                            新照片:
                        </td>
                        <td valign="middle" align="left">
                            <img src="" id="show" width="150">
                        </td>

                    </tr>
                    <tr>
                        <td></td>
                        <td valign="middle" align="left">
                            <input type="file" ref="photo" id="image" @change="changepic"/>
                        </td>
                    </tr>
                </table>
                <p>
                    <input type="button" @click="editEmp" class="button" value="提交"/>
                </p>
            </form>
        </div>
    </div>
    <div id="footer">
        <div id="footer_bg">
            545394882@qq.com
        </div>
    </div>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var app = new Vue({
        el: "#wrap",
        data: {  //数据
            user: {
                realname: "",
            },//用来存放用户登录信息
            emp: {}
        },
        methods: { //自定义函数
            //处理安全退出
            logout() {
                localStorage.removeItem("user");
                location.reload(true);//刷新页面
            },
            //处理员工信息修改
            editEmp() {
                console.log(this.emp);
                console.log(this.$refs.photo.files[0]);
                //文件上传时 请求方式必须是post  enctype必须为multipart/form-data
                var formData = new FormData();
                formData.append("id", this.emp.id)
                formData.append("name", this.emp.name);
                formData.append("path", this.emp.path);
                formData.append("salary", this.emp.salary);
                formData.append("age", this.emp.age);
                formData.append("photo", this.$refs.photo.files[0]);
                var _this = this;
                axios({
                    method: "post",
                    url: "http://localhost:8989/emp/update",
                    data: formData,
                    headers: {
                        'content-type': 'multipart/form-data'
                    }
                }).then(res => {
                    console.log(res.data);
                    if (res.data.state) {
                        if (window.confirm(res.data.msg + ",点击确定跳转到列表页面!")) {
                            location.href = "/emplist.html";
                        }
                    } else {
                        alert(res.data.msg);
                    }
                });

            },
            changepic() {
                var reads = new FileReader();
                var f = document.getElementById('image').files[0];
                reads.readAsDataURL(f);
                reads.onload = function (e) {
                    document.getElementById('show').src = e.target.result;

                }
            },
            gettime() {
                var today = new Date();
                var year = today.getFullYear();
                var month = (today.getMonth() + 1) < 10 ? '0' + (today.getMonth() + 1) : (today.getMonth() + 1);
                var day = (today.getDate()) < 10 ? '0' + (today.getDate()) : (today.getDate());
                date1 = year + "-" + month + "-" + today.getDate();
                this.time = date1;

            }
        },
        created() {//生命周期函数
            this.gettime();
            var userString = localStorage.getItem("user");
            if (userString) {
                this.user = JSON.parse(userString);
            } else {
                alert("您尚未登录,点击确定跳转至登录页面!");
                location.href = "/login.html";
            }
            //获取对应id信息
            var start = location.href.lastIndexOf("=");
            var id = location.href.substring(start + 1);
            console.log(id);
            //查询一个人信息
            var _this = this;
            axios.get("http://localhost:8989/emp/findOne?id=" + id).then(res => {
                console.log(res.data);
                _this.emp = res.data;
            });
        }
    });
</script>